<template>
    <div>
      <div style="width: 80%;margin: 20px auto">
      <div class="card" >
        <el-input v-model="data.key" clearable style="width: 200px;margin-right: 10px" placeholder="请输入名称"/>
        <el-button type="warning" plain @click="load(data.key)">搜索</el-button>
        <el-button type="primary"  @click="route.push('ordermsglist')">返回上一级</el-button>
      </div>
      <div class="card" style="margin-top: 5px" >
        <el-table :data="data.tableData" min-height="250" style="width: 100%">
          <el-table-column prop="orderno" label="订单号" />
          <el-table-column label="图片" >
            <template #default="scope">
              <el-image @click="route.push('goodsDateil?id='+scope.row.goodsid)"
                        style="width: 80px; height: 80px"
                        :src="scope.row.goods.fileimg"
                        :preview-teleported="true">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="goodsname" label="菜品名称" />
          <el-table-column prop="slnum" label="数量" />
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="subtotal" label="小计" />
          <el-table-column prop="status" label="订单状态" />
          <el-table-column label="操作" >
            <template #default="scope">
              <template v-if="scope.row.status==='交易完成'">
                <el-button type="primary" plain size="small" @click="Add(scope.row)">评价</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>

        <div v-if="data.total>0" style="display: flex;justify-content: center;margin: 15px">
          <el-pagination
              @current-change="load()"
              background
              layout="prev, pager, next"
              v-model:page-size="data.pageSize"
              v-model:current-page="data.pageNum"
              :total="data.total"/>
        </div>
      </div>
      </div>

      <el-dialog title="评价新增" width="60%" v-model="data.formVisible" :close-on-click-modal="false" destroy-on-close>
        <el-form :model="data.form" ref="formRef" :rules="data.rules" label-width="100px" style="padding-right: 50px;margin-top: 20px;">
          <el-form-item label="评星">
            <el-rate v-model="data.pfnum"></el-rate>
          </el-form-item>
          <el-form-item label="评价内容" prop="content">
            <el-input type="textarea" :rows="3" v-model="data.form.content" placeholder="请输入评价内容" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
        </template>
      </el-dialog>

    </div>
</template>

<script setup>
import {createApp, onMounted, reactive, ref} from "vue";
import router from "@/router/index.js";
import request from '@/utils/request.js'
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import {useRouter} from "vue-router";
const route = useRouter()
//提交是表单校验
const formRef = ref()
const data = reactive({
  member: JSON.parse(localStorage.getItem('member') || '{}'),
  orderno:route.currentRoute.value.query.orderno,
  key:'',
  key1:'',
  pageNum: 1,
  pageSize: 10,
  total: 0,
  tableData:[],
  form:{},
  formVisible:false,
  pfnum:5,
  rules:{
    content: [{ required: true, message: '评价内容不能为空', trigger: 'blur' },],
  }
})

//信息列表
const load =()=>{
  console.log(data.orderno)
  request.post('orderdateilList', qs.stringify({
    orderno:data.orderno,
    key:data.key,
    pageNum: data.pageNum,
    pageSize: data.pageSize,
  })).then(res => {
    data.tableData = res.data.list
    data.total = res.data.total
  })
}

//调出编辑框
const Add = (row) => {
  data.form = JSON.parse(JSON.stringify(row))
  data.formVisible = true
}

// 评价新增
const save = () => {
  formRef.value.validate((valid=>{
    if (valid){
      request.post('evaluateAdd', qs.stringify({
        memberid:data.member.id,
        pfnum:data.pfnum,
        goodsid:data.form.goodsid,
        content:data.form.content,
      })).then(res => {
        if (res.code === '200') {
          ElMessage.success('操作成功')
          data.formVisible = false
          load()
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  }))

}
/*
const xqdateil=(id)=>{
  window.location.href = '/front/goodsDateil?id='+id
}
*/



load()

/*onMounted(() => {
  load(data.pageNum)
})*/

</script>
